{% extends 'migration_app/dashboard_base.html' %}
{% load static %}

{% block title %}Oracle 用户列表{% endblock %}

{% block page_title %}Oracle 用户列表{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'migration_app:index' %}">首页</a></li>
        <li class="breadcrumb-item">Oracle</li>
        <li class="breadcrumb-item active" aria-current="page">用户列表</li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">
            <i class="fas fa-users me-2"></i>用户列表
        </h5>
        <div class="d-flex gap-2">
            <select class="form-select form-select-sm" id="connectionSelect">
                <option value="">选择连接</option>
                {% for connection in connections %}
                <option value="{{ connection.id }}">{{ connection.name }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-primary btn-sm" id="refreshBtn" disabled>
                <i class="fas fa-sync-alt me-1"></i>刷新
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>账户状态</th>
                        <th>默认表空间</th>
                        <th>临时表空间</th>
                        <th>配置文件</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="userList">
                    <tr>
                        <td colspan="7" class="text-center">请选择连接</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 用户详情模态框 -->
<div class="modal fade" id="userDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">用户详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#privileges">权限</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#quotas">配额</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#roles">角色</a>
                    </li>
                </ul>
                <div class="tab-content pt-3">
                    <div class="tab-pane fade show active" id="privileges">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>权限类型</th>
                                        <th>权限名称</th>
                                        <th>授予选项</th>
                                    </tr>
                                </thead>
                                <tbody id="privilegesList"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="quotas">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>表空间</th>
                                        <th>配额大小</th>
                                        <th>已使用</th>
                                    </tr>
                                </thead>
                                <tbody id="quotasList"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="roles">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>角色名称</th>
                                        <th>管理选项</th>
                                        <th>默认角色</th>
                                    </tr>
                                </thead>
                                <tbody id="rolesList"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    const connectionSelect = $('#connectionSelect');
    const refreshBtn = $('#refreshBtn');
    const userList = $('#userList');
    const userDetailModal = new bootstrap.Modal(document.getElementById('userDetailModal'));

    // 连接变化时启用刷新按钮
    connectionSelect.change(function() {
        refreshBtn.prop('disabled', !$(this).val());
        if ($(this).val()) {
            loadUsers();
        }
    });

    // 刷新按钮点击事件
    refreshBtn.click(loadUsers);

    // 加载用户列表
    function loadUsers() {
        const connectionId = connectionSelect.val();
        if (!connectionId) return;

        showLoader();
        $.post('/app/oracle/users/', {
            connection_id: connectionId,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        })
        .done(function(response) {
            userList.empty();
            if (response.users.length === 0) {
                userList.append('<tr><td colspan="7" class="text-center">没有找到用户</td></tr>');
                return;
            }

            response.users.forEach(function(user) {
                const statusBadge = getStatusBadge(user.account_status);
                userList.append(`
                    <tr>
                        <td>${user.username}</td>
                        <td>${statusBadge}</td>
                        <td>${user.default_tablespace}</td>
                        <td>${user.temp_tablespace}</td>
                        <td>${user.profile}</td>
                        <td>${user.created || '-'}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary view-details" 
                                        data-username="${user.username}" 
                                        title="查看详情">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-outline-info view-objects" 
                                        data-username="${user.username}"
                                        title="查看对象">
                                    <i class="fas fa-database"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `);
            });
        })
        .fail(function(xhr) {
            showToast('加载用户列表失败: ' + xhr.responseText, 'error');
        })
        .always(function() {
            hideLoader();
        });
    }

    // 获取状态徽章HTML
    function getStatusBadge(status) {
        const statusMap = {
            'OPEN': '<span class="badge bg-success">正常</span>',
            'LOCKED': '<span class="badge bg-warning">锁定</span>',
            'EXPIRED': '<span class="badge bg-danger">过期</span>',
            'EXPIRED & LOCKED': '<span class="badge bg-danger">过期且锁定</span>'
        };
        return statusMap[status] || `<span class="badge bg-secondary">${status}</span>`;
    }

    // 查看用户详情
    $(document).on('click', '.view-details', function() {
        const username = $(this).data('username');
        const connectionId = connectionSelect.val();
        
        showLoader();
        $.post('/app/oracle/users/details/', {
            connection_id: connectionId,
            username: username,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        })
        .done(function(response) {
            // 显示权限
            $('#privilegesList').empty();
            response.privileges.forEach(function(priv) {
                $('#privilegesList').append(`
                    <tr>
                        <td>${priv.type}</td>
                        <td>${priv.name}</td>
                        <td>${priv.admin_option ? '<i class="fas fa-check text-success"></i>' : ''}</td>
                    </tr>
                `);
            });

            // 显示配额
            $('#quotasList').empty();
            response.quotas.forEach(function(quota) {
                $('#quotasList').append(`
                    <tr>
                        <td>${quota.tablespace}</td>
                        <td>${quota.max_bytes}</td>
                        <td>${quota.bytes_used}</td>
                    </tr>
                `);
            });

            // 显示角色
            $('#rolesList').empty();
            response.roles.forEach(function(role) {
                $('#rolesList').append(`
                    <tr>
                        <td>${role.role}</td>
                        <td>${role.admin_option ? '<i class="fas fa-check text-success"></i>' : ''}</td>
                        <td>${role.default_role ? '<i class="fas fa-check text-success"></i>' : ''}</td>
                    </tr>
                `);
            });

            userDetailModal.show();
        })
        .fail(function(xhr) {
            showToast('加载用户详情失败: ' + xhr.responseText, 'error');
        })
        .always(function() {
            hideLoader();
        });
    });

    // 查看用户对象
    $(document).on('click', '.view-objects', function() {
        const username = $(this).data('username');
        const connectionId = connectionSelect.val();
        window.location.href = `/app/oracle/users/${connectionId}/${username}/objects/`;
    });
});
</script>
{% endblock %} 